<template>
  <div class="exchange-box" @click="onItem">
    <div class="top">
      <img :src="item.pic" alt />
<!--      <div class="name">{{item.name}}</div>-->
    </div>
    <div class="under">
<!--      <p>{{item.subTitle}}</p>-->
      <div>
        <el-button size="small" type="primary" @click.stop="onChat(item.memberId)">私信他</el-button>
      </div>
    </div>
  </div>
</template>
<script>
  import { doMessage } from '@/utils/message';

  export default {
    name: 'ExchangeItem',
    props: {
      item: {
        type: Object,
        default: () => {}
      }
    },
    methods: {
      onItem() {
        this.$router.push({ name: 'exchangeInfo', query: { id: this.item.id, info: this.item }});
      },
      onChat(memberId) {
        this.$store.commit('msgMember', memberId);
        doMessage(this, true);
      }
    },
    created() {}
  };
</script>
dui
<style lang="scss" type="text/scss" scoped>
.exchange-box {
  border: 1px solid #e5e5e5;
  border-radius: 2px;
  background: white;
  :hover {
    cursor: pointer;
  }
  .top {
    position: relative;
    img {
      width: 100%;
      height: 300px;
      object-fit: contain;
    }
    .name {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: rgba($color: #000000, $alpha: 0.7);
      color: white;
      padding: 4px 8px;
      @include line-elli();
    }
  }

  .under {
    padding: 12px;
    font-size: 14px;
    height: 60px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    p {
      margin-top: 0;
      @include lines-elli(2);
    }
    div {
      text-align: center;
    }
  }
}
</style>
